<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<meta charset=utf-8 />
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
</head>
<body   onload= writePathEditColorSelection();sendSize()  style='border-radius:10px;border:2px solid lightblue;background-color:transparent;padding:0;margin:0;font-family:arial'>
<table id=topTable style='background-color:orange;padding:3px;width:100%;'><tr><td style='width:80%;' align=center><span id=editSpan>Edit Path&nbsp;</span> <span id=rightAngleSpan><b>L</b>:<input title="right angle path" type=checkbox id=drawPathEditRightAngleCheck />[L]</span>
</td><td align=right><button  onClick=parent.closeDrawPathEdit()>X</button>[X]</td></tr></table>
<table  style=border-radius:10px;width:300px;background-color:gainsboro>


<tr style=background-color:orange>
<td align=center ><span id=drawPathEditStrokeBg >Stroke Color:</span>
<select title="Stroke Color" onChange=parent.showDrawPathEditStrokeBg() id=drawPathEditStrokeSelect></select>
width:
  <select onChange=parent.drawPathEditStrokeWidthSelected() id=drawPathEditStrokeWidthSelect>
		<option title="none" >0</option>
		<option >0.5</option>
		<option >1</option>
		<option >1.5</option>
		<option >2</option>
		<option >2.5</option>
		<option >3</option>
		<option >4</option>
		<option >5</option>
		<option >6</option>
		<option >7</option>
		<option >8</option>
		<option >9</option>
		<option >10</option>
		<option >15</option>
		<option >20</option>
		<option >25</option>
		<option >30</option>
		<option >35</option>
		<option >40</option>
		<option >45</option>
		<option >50</option>	</select>
 <br>
 Stroke Opacity:
  <select onChange=parent.drawPathEditStrokeOpacitySelected() id=drawPathEditStrokeOpacitySelect>
		<option >0.1</option>
		<option>0.2</option>
		<option >0.3</option>
		<option >0.4</option>
		<option>0.5</option>
		<option >0.6</option>
		<option >0.7</option>
		<option >0.8</option>
		<option >0.9</option>
		<option  selected >1.0</option>
    </select> <br>



Dash[D]:<input type=checkbox id=drawPathEditStrokeDashCheck onClick=parent.drawPathEditStrokeDashChecked() />
&nbsp;Arrow[A]:<input type=checkbox id=drawPathEditStrokeArrowCheck onClick=parent.drawPathEditStrokeArrowChecked() />
&nbsp;Shadow:<input type=checkbox id=drawPathEditShadowCheck onClick=parent.drawPathEditShadowChecked() />

</td>
</tr>
<tr style=background-color:orange>
<td align=center >

3D Pipeline:<input type="checkbox" id=drawPathEditPipe3DCheck onClick=parent.drawPathEditPipe3DChecked() />

</td>
</tr>

<tr style=background-color:orange>
<td align=center ><span id=drawPathEditFillBg >Fill Color:</span>
<select  title="Fill Opacity" onChange=parent.showDrawPathEditFillBg() id=drawPathEditFillSelect></select>
Opacity:
  <select onChange=parent.drawPathEditOpacitySelected() id=drawPathEditOpacitySelect>
		<option >0.1</option>
		<option>0.2</option>
		<option >0.3</option>
		<option >0.4</option>
		<option>0.5</option>
		<option >0.6</option>
		<option >0.7</option>
		<option >0.8</option>
		<option >0.9</option>
		<option selected >1.0</option>

		</select>

</td>
</tr>
<tr style=background-color:orange align=center>
	<td>
	<span id=drawPathEditTopButtons>
		<button disabled id=drawPathEditPauseButton onClick=pauseDrawPathLocalEdit()>pause[P]</button>
		<button disabled id=drawPathEditUndoButton onClick=parent.undoDrawPathEdit()>undo[U]</button>
		<button id=drawPathEditEncloseButton disabled onClick=parent.encloseDrawPathEdit()>enclose[E]</button>
		<button id=smoothPathEditButton style='width:75px;' disabled onClick=parent.drawPathEditSmoothSelected()>smooth[S]</button>

        <br>Drag This Path:<input title="Drag this path" type="checkbox" id=dragPathCheck onClick=parent.dragPathChecked() />

</span>
	</td>
</tr>

<tr style=background-color:orange>
	<td valign=bottom align=center>Rotate
		&nbsp;&nbsp;<button  onClick=parent.rotatePathAdjust(-1) style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/minusRound.png" /></button>
		<select title="rotate toggle value" id=rotateDrawPathAdjustSelect >
		<option>.5</option>
		<option>1</option>
		<option>2</option>
		<option selected>5</option>
		<option>10</option>
		</select>
		<button onClick=parent.rotatePathAdjust(1)   style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/plusRound.png" /></button>
		&nbsp;<input id=adjustedRotatePathValue disabled type=text style='width:40px;' value=0 />&deg;
	</td>
</tr>

<tr style=background-color:orange align=center>
<td>
	<button id=drawPathEditCancelButton disabled title='cancel this path edit' onClick=parent.closeDrawPathEdit()>cancel[C]</button>
    <button title='delete this path' style='background-color:red' id=drawPathEditDeleteButton  onClick=parent.deleteDrawPathEdit()>delete</button>
	<button id=drawPathEditTopButton style=background:white;font-size:120%;font-weight:bold;color:maroon;  title='Move to top' onClick=parent.topDrawPathEdit()>&#x21E7;</button>
	<button id=drawPathEditBotButton style=background:white;font-size:120%;font-weight:bold;color:maroon;   title='Move to bottom' onClick=parent.botDrawPathEdit()>&#x21E9;</button>

	<button id=drawPathEditFinishButton disabled onClick=parent.finishDrawPathEdit()>finish[F]</button>
</td>
</tr>
<tr style=background-color:orange align=center>
<td align=center>[key]- Keyboard shortcut key</td></tr>
</table>

</body>
<script>

function pauseDrawPathLocalEdit()
{
	if(parent.PrevKeyPathEdit==112)
	{
		parent.unPauseDrawPathEdit()
        parent.PrevKeyPathEdit=null
	}
	else
	{
      	parent.pauseDrawPathEdit()
       	parent.PrevKeyPathEdit=112
	}
}


function writePathEditColorSelection()
{
   var DrawColors=parent.clrArray
	for(var k=0;k<DrawColors.length;k++)
	{
		var name=DrawColors[k][0]
		var myColor=DrawColors[k][1]


		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                    if(parent.hexString.indexOf(myColor)!=-1)
                option.style.color="white"

		option.text=k
        drawPathEditStrokeSelect.appendChild(option)


		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                   if(parent.hexString.indexOf(myColor)!=-1)
                option.style.color="white"

		option.text=k
        drawPathEditFillSelect.appendChild(option)




	}
	drawPathEditStrokeSelect.selectedIndex=353
	var clr=drawPathEditStrokeSelect.options[drawPathEditStrokeSelect.selectedIndex].value
	drawPathEditStrokeBg.style.backgroundColor=clr
}

function sendSize()
{

	window.name = 'drawPathEditWindow';
   var width=document.body.scrollWidth+4
   var height=document.body.scrollHeight+12
   parent.sizeFrame('addElemPathEdit',width,height)
   parent.editAddPathElem(parent.elemObjEdit)


}
</script>
</html>